<template>
    <div class="films">
        <!-- 轮播图开始 -->
        <div class="swiper-container">
            <!-- 城市选择 -->
            <router-link tag = "div" to="/city" class="address" style="cursor: pointer;">
              {{city || addressNow}}<i style="margin-left:5px;"></i>
            </router-link>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://static.maizuo.com/208eeedaedc389146a7b30d6b5661e9b.jpg?x-oss-process=image/quality,Q_70"/>
                </div>
                <div class="swiper-slide">
                     <img src="https://static.maizuo.com/d06b370783ff4c9c7f500c7dd7f03e84.jpg?x-oss-process=image/quality,Q_70"/>
                </div>
                <div class="swiper-slide">
                      <img src="https://static.maizuo.com/c3cf71dae8be7a728e1713c0b155e3ec.jpg?x-oss-process=image/quality,Q_70"/>
                </div>
                <div class="swiper-slide">
                     <img src="https://static.maizuo.com/v5/upload/1c88a2e71e7213e157fc3171cf23b317.jpg?x-oss-process=image/quality,Q_70"/>
                </div>
                <div class="swiper-slide">
                      <img src="https://static.maizuo.com/v5/upload/7698f1ac5da627f88fbe9337771dbe15.jpg?x-oss-process=image/quality,Q_70"/>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- 轮播图结束 -->
        <div class="header">
            <router-link to="/film/nowPlaying" tag="div" class="hot" active-class="active">
                <span>{{hot}}</span>
            </router-link>
            <router-link to="/film/commingSoon" tag="div" class="will" active-class="active" >
                <span>{{will}}</span>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
/* eslint-disable-next-line */
/*  eslint-disable no-new */
/* eslint-disable indent */
import Swiper from 'swiper'
import {mapGetters} from 'vuex'
export default {
  name: 'film',
   data () {
    return {
      'hot': '正在热映',
      'will': '即将上映',
      'curTab': 'hot',
      'addressNow': '北京'
    }
  },

  mounted () {
    // 我们的轮播图
    new Swiper('.swiper-container', {
      autoplay: true,
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
    })
    this.setCity()
    this.getCity()
    this.getUserShop()
    console.log(this.$store.state.city)
  },
  computed: {
      ...mapGetters([
          'city'
      ])
  },
  methods: {
    hotclick () {
      this.curTab = 'hot'
    },
    willclick () {
      this.curTab = 'will'
    },
    /**
     * 设置城市，当用户如果选择了城市的话，我们就将用户选择的城市保留下来
     */
    setCity () {
      if (this.$store.state.city) {
        localStorage.setItem('city', this.$store.state.city)
      }
    },
    /**
     * 获取城市，确保用户刷新页面的时候可以保留城市
     */
    getCity () {
      var city = localStorage.getItem('city')
      if (city) {
        this.$store.commit('selectCity', city)
      }
    },
    /**
     * 获取用户的购物车
     */
    getUserShop () {
      var userShop = JSON.parse(localStorage.getItem('userShop'))
      if (userShop) {
        this.$store.commit('setShopCar', userShop)
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
@import 'swiper/dist/css/swiper.min.css';
.font12{
  font-size: px2rem(12);
}
.font13{
  font-size: px2rem(13);
}
.films{
    flex: 1;
    overflow-y: auto;
}
.swiper-container {
    height: px2rem(210);
    position: relative;
    .address{
    position: absolute;
    z-index: 20;
    top: px2rem(18);
    left: px2rem(7);
    color: #fff;
    background: rgba(0,0,0,.6);
    height: px2rem(30);
    line-height: px2rem(30);
    padding: 0 px2rem(5);
    border-radius: px2rem(15);
    font-size: px2rem(10);
}
    img{
        width: 100%;
        height: 100%;
    }
    .swiper-pagination-bullet {
        width: px2rem(10);
        height: px2rem(10);
    }
    .swiper-pagination-bullet-active {
        background: yellowgreen;
    }
 }
 .header{
    position:sticky;
    left: 0;
    top: 0;
    height: px2rem(49);
    background-color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #908787;
    .hot,.will{ // 正在热映和即将上映
        height: 100%;
        flex:1;
        text-align: center;
        font-size: px2rem(14);
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .active{    // 当前所处的tab页
        color: #FF844C;
        position: relative;
        &::after{
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: px2rem(1);
            background-color: #FF844C;
        }
    }
}
// main列表区域
.film-list{
    li{
        padding: px2rem(15);
        height: px2rem(94);
        background-color: #fff;
        border-bottom: 1px solid #908787;
        display: flex;
        // 左侧电影海报
        .list-left{
            width: px2rem(66);
            height: px2rem(94);
            img{
                width: 100%;
            }
        }
        // 中间电影信息
        .list-right{
          display: flex;
          .film-info{
            width: px2rem(209);
            padding: 0 px2rem(10);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            h5{
                height: px2rem(22);
                line-height: px2rem(22);
                font-size: px2rem(16);
                font-weight: 400;
                color: #191a1b;
                display: flex;
                .filmType{
                    display: inline-block;
                    padding: 0 px2rem(2);
                    height: px2rem(14);
                    background-color: #d2d6dc;
                    font-size: px2rem(9);
                    margin-left: px2rem(5);
                    color: #fff;
                    line-height: px2rem(14);
                    text-align: center;
                    align-self: center;
                }
            }
            p.actor{
                // overflow: hidden;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }
          }
          .ticket{
              align-self: center;
              width: px2rem(50);
              height: px2rem(25);
              line-height: px2rem(25);
              text-align: center;
              border: 1px solid #ff5f16;
              color: #ff5f16;
              font-size: px2rem(13)
          }
        }
    }
}
</style>
